<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>摄影师详情 - 漫展接单小程序</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gray-100">
    <!-- 顶部导航栏 -->
    <div class="bg-white shadow-md sticky top-0 z-20">
        <div class="max-w-screen-xl mx-auto px-4 py-3 flex items-center">
            <button class="mr-3">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-gray-600" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                </svg>
            </button>
            <div class="text-lg font-medium">摄影师详情</div>
        </div>
    </div>

    <!-- 摄影师信息 -->
    <div class="bg-white shadow-md mb-4">
        <div class="relative">
            <div class="h-48 bg-gradient-to-r from-purple-500 to-pink-500"></div>
            <div class="absolute bottom-0 left-0 right-0 p-4 bg-gradient-to-t from-black/70 to-transparent text-white">
                <div class="flex items-end">
                    <img src="https://images.unsplash.com/photo-1535713875002-d1d0cf377fde?ixlib=rb-1.2.1&auto=format&fit=crop&w=100&q=80" alt="摄影师头像" class="w-20 h-20 rounded-full border-4 border-white mr-3">
                    <div>
                        <h1 class="text-2xl font-bold">小明摄影</h1>
                        <div class="flex items-center text-sm">
                            <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-yellow-400 mr-1" viewBox="0 0 20 20" fill="currentColor">
                                <path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
                            </svg>
                            <span>4.9 (125条评价)</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="p-4">
            <div class="flex justify-between items-center mb-3">
                <div class="flex items-center">
                    <div class="bg-green-500 text-white text-sm px-2 py-1 rounded-full mr-2">空闲中</div>
                    <div class="text-sm text-gray-600">今日可接单</div>
                </div>
                <button class="bg-purple-600 text-white px-4 py-2 rounded-full text-sm font-medium">关注</button>
            </div>
            <div class="flex justify-between text-sm text-gray-600 border-t border-gray-100 pt-3">
                <div>
                    <div class="font-medium text-gray-800">3年+</div>
                    <div>摄影经验</div>
                </div>
                <div>
                    <div class="font-medium text-gray-800">500+</div>
                    <div>作品数量</div>
                </div>
                <div>
                    <div class="font-medium text-gray-800">98%</div>
                    <div>好评率</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 标签栏 -->
    <div class="bg-white mb-4 sticky top-12 z-10">
        <div class="flex border-b">
            <button class="flex-1 py-3 text-center text-purple-600 border-b-2 border-purple-600 font-medium">作品集</button>
            <button class="flex-1 py-3 text-center text-gray-600">套餐</button>
            <button class="flex-1 py-3 text-center text-gray-600">评价</button>
        </div>
    </div>

    <!-- 作品集 -->
    <div class="p-4">
        <div class="flex justify-between items-center mb-4">
            <h2 class="text-lg font-medium">精选作品</h2>
            <button class="text-sm text-purple-600">查看全部</button>
        </div>
        <div class="grid grid-cols-2 gap-2 mb-6">
            <img src="https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="作品1" class="w-full h-40 object-cover rounded-lg">
            <img src="https://images.unsplash.com/photo-1533929736458-ca588d08c8be?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="作品2" class="w-full h-40 object-cover rounded-lg">
            <img src="https://images.unsplash.com/photo-1551854638-3c5e37b89952?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="作品3" class="w-full h-40 object-cover rounded-lg">
            <img src="https://images.unsplash.com/photo-1581318694548-0fb6e47fe59b?ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80" alt="作品4" class="w-full h-40 object-cover rounded-lg">
        </div>

        <div class="bg-white rounded-lg p-4 shadow-md mb-4">
            <h3 class="font-medium mb-2">摄影师介绍</h3>
            <p class="text-gray-600 text-sm">专注于Cosplay摄影3年，擅长动漫人物还原与场景营造。曾为多个知名Coser拍摄作品，作品曾在各大漫展和社交平台获得高度认可。擅长后期调色和构图，能够根据不同角色特点打造专属风格。</p>
        </div>

        <div class="bg-white rounded-lg p-4 shadow-md">
            <h3 class="font-medium mb-2">拍摄风格</h3>
            <div class="flex flex-wrap gap-2">
                <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">日系清新</span>
                <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">暗黑系</span>
                <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">古风</span>
                <span class="bg-purple-100 text-purple-600 px-3 py-1 rounded-full text-sm">二次元</span>
            </div>
        </div>
    </div>

    <!-- 底部预约按钮 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white shadow-md p-3 flex">
        <div class="flex-1 pr-2">
            <div class="text-xs text-gray-500">起步价</div>
            <div class="text-lg font-bold text-purple-600">¥199</div>
        </div>
        <button class="flex-1 bg-purple-600 text-white py-3 rounded-lg font-medium">立即预约</button>
    </div>
</body>
</html>